*,
*:before,
*:after {
  box-sizing: border-box;
  margin    : 0;
  padding   : 0;
}

html {
  height: 100vh;
}

.container {
  display    : flex;
  flex-flow  : row nowrap;
  align-items: stretch;
  min-height : 100vh;
}

.container .ctrl {
  flex            : 480px 0 0;
  padding         : 1em;
  background-color: #3b4393;
  color           : #fff;
}

.container .ctrl h1 {
  text-align: center;
  color     : #fff;
}

.container .ctrl h2 {
  color   : #fd971f;
  position: relative;
  margin  : 0.5em;
  cursor  : pointer;
}

.container .ctrl h2:hover::before {
  background-color: #bbccff;
}

.container .ctrl .row {
  padding      : 0.3em;
  border-bottom: 1px dashed rgba(255, 255, 255, .5);
}

.container .ctrl .row:first-of-type {
  border-top: 1px dashed rgba(255, 255, 255, .5);
}

.container .ctrl label {
  display    : inline-block;
  width      : 10em;
  line-height: 2em;
}

.container .ctrl label:not(:first-child) {
  width       : 4.5em;
  margin-left : 3em;
  margin-right: 2em;
}

.container .ctrl input {
  position: relative;
  display : inline-block;
  width   : 18em;
  height  : 2em;
}

.container .ctrl .row span {
  display: inline-block;
  width  : 2em;
}

.container .ctrl input[type=range] {
  top: 0.6em;
}

.container .ctrl input[type=radio] {
  margin: 0 1em;
  width : 1em;
  top   : 0.6em;
}

.container .ctrl input[type=color] {
  width: 4em;
}

.container .ctrl input[type=checkbox] {
  margin: 0 1em;
  width : 1em;
  top   : 0.4em;
}

.container .ctrl input[type=number] {
  margin    : 0 1em 0 0;
  width     : 4em;
  text-align: center;
}

/* <select> styles */
.container .ctrl select {
  /* Reset */
  -webkit-appearance: none;
  -moz-appearance   : none;
  appearance        : none;
  border            : 0;
  outline           : 0;
  font              : inherit;
  /* Personalize */
  position          : relative;
  display           : inline-block;
  width             : 15em;
  padding           : 0.5em 0.8em 0.5em 0.8em;
  background        : linear-gradient(to left, rgba(255, 255, 255, 0.4) 2.4em, rgba(255, 255, 255, 0.2) 2.4em);
  color             : white;
  border-radius     : 0.4em;
  box-shadow        : 0 0 1em 0 rgba(0, 0, 0, 0.2);
  cursor            : pointer;
}

.container .ctrl select::before {
  content     : "";
  width       : 0.5em;
  height      : 0.5em;
  border      : 2px solid #fff;
  border-color: transparent transparent #000 #000;
  position    : absolute;
  top         : 0px;
  right       : 0px;
  z-index     : 9999;
}

/* <option> colors */
/* Remove focus outline */
/* Remove IE arrow */
.container .ctrl select option {
  color           : inherit;
  display         : inline-block;
  padding         : 1em 0;
  background-color: #320a28;
}

.container .ctrl select:focus {
  outline: none;
}

select::-ms-expand {
  display: none;
}

.container .ctrl input[type=text] {
  appearance   : none;
  border       : none;
  outline      : none;
  height       : 36px;
  background   : rgba(255, 255, 255, 0.2);
  color        : white;
  border-radius: 0.4em;
  padding      : 0.5em 0.8em 0.5em 0.8em;
}

.container .ctrl h2::before {
  content         : "";
  width           : 4px;
  height          : 20px;
  background-color: #332266;
  position        : absolute;
  left            : -10px;
  top             : 6px;
  transition      : background-color .5s;
}

.container .ctrl .css {
  position: relative;
}

.container .ctrl code {
  border-radius: 10px;
}

.container .ctrl .copy-code {
  height       : 32px;
  width        : 32px;
  position     : absolute;
  bottom       : -10px;
  right        : -10px;
  background   : #339af0;
  border-radius: 50%;
  z-index      : 10;
  transition   : 0.2s;
  cursor       : pointer;
}

.container .ctrl .css:active .copy-code {
  transform: translate(0, 0) scale(0.9);
}

.container .ctrl .copy-code::after {
  font-family: "Font Awesome 5 Free";
  font-weight: 600;
  font-size  : 16px;
  content    : "\f328";
  color      : #fff;
  position   : absolute;
  top        : 8px;
  left       : 10px;
}

.container .prev {
  flex   : 600px 3 1;
  padding: 0em;
}

.container .prev .son {
  
}